<template>
  <div class="scheme-detail-container">
    
    <!-- 上方展示信息区域 -->
    <div class="header-info">
      <div class="info-left">
        <!-- 需求名称区域 -->
        <div class="requirement-name-container">
          <span class="requirement-name-title">需求名称：</span>
          <span class="requirement-name-value">{{ schemeData.requirementName }}</span>
        </div>
        <!-- 其他信息区域 -->
        <div class="additional-info">
          <span class="contract-no">关联合同编号：{{ schemeData.contractNo }}</span>
          <span class="contract-name">关联合同：{{ schemeData.contractName }} 
            <el-link type="primary" size="small" @click="viewContract" style="margin-left: 5px; cursor: pointer;">查看</el-link>
          </span>
          <span class="requirement-no">需求编号：{{ schemeData.requirementNo }}</span>
          <span class="requirement-type">需求类别：{{ schemeData.requirementType }}</span>
        </div>
        <div class="additional-info">
          <span class="material-content">物料内容：{{ schemeData.materialContent }}</span>
          <span class="material-quantity">物料数量：{{ schemeData.materialQuantity }}</span>
          <span class="current-status">当前状态：{{ schemeData.currentStatus }}</span>
        </div>
        <div class="additional-info">
          <span class="sales-person">销售人员：{{ schemeData.salesPerson }}</span>
          <span class="create-time">创建时间：{{ schemeData.createTime }}</span>
        </div>
      </div>
      <div class="info-right">
        <el-button @click="handleBack" plain>返回</el-button>
      </div>
    </div>
    
    <!-- 下方左右布局区域 -->
    <div class="main-content-container">
      <!-- 左侧选项卡 -->
      <div class="left-sidebar">
        <h3 class="config-title">需求参数</h3>
        <div class="tab-container">
          <div 
            class="tab-item" 
            :class="{ active: activeTab === 'technical' }"
            @click="activeTab = 'technical'"
          >
            <span class="dot"></span>
            <span class="tab-text">技术参数</span>
          </div>
          <div 
            class="tab-item" 
            :class="{ active: activeTab === 'business' }"
            @click="activeTab = 'business'"
          >
            <span class="dot"></span>
            <span class="tab-text">业务参数</span>
          </div>
        </div>
      </div>

      <!-- 中间分割线 -->
      <div class="divider"></div>

      <!-- 右侧内容区域 -->
      <div class="right-content">
        <!-- 右侧标题 -->
        <div class="right-header">
          <h3 class="content-title">
            {{ activeTab === 'technical' ? '技术参数' : '业务参数' }}
          </h3>
        </div>

        <!-- 右侧内容 -->
        <div class="content-area">
          <!-- 技术参数内容区 -->
          <div v-if="activeTab === 'technical'" class="technical-content">
            <div class="total-quantity">总数量：{{ technicalParamsList.length }}</div>
            <el-table :data="technicalParamsList" style="width: 100%" border>
              <el-table-column prop="field1" label="配置的字段" align="left" />
              <el-table-column prop="field2" label="配置的字段" align="left" />
              <el-table-column prop="field3" label="配置的字段" align="left" />
              <el-table-column prop="unitPrice" label="单价" align="left" />
              <el-table-column prop="quantity" label="数量" align="left" />
              <el-table-column prop="field6" label="配置的字段" align="left" />
              <el-table-column prop="field7" label="配置的字段" align="left" />
            </el-table>
            <el-pagination
              style="margin-top: 20px; justify-content: flex-end;"
              v-model:current-page="query.pageNum"
              v-model:page-size="query.pageSize"
              :page-sizes="[10, 20, 30, 50]"
              :total="technicalParamsList.length"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
          <!-- 业务参数内容区 -->
          <div v-else-if="activeTab === 'business'" class="business-content">
            <div class="business-item">
              <div class="business-label">紧急程度：</div>
              <div class="business-value">{{ businessParams.emergencyLevel }}</div>
            </div>
            <div class="business-item">
              <div class="business-label">交付日期：</div>
              <div class="business-value">{{ businessParams.deliveryDate }}</div>
            </div>
            <div class="business-item">
              <div class="business-label">客户要求：</div>
              <div class="business-value customer-requirements">
                {{ businessParams.customerRequirements }}
              </div>
            </div>
            <div class="business-item">
              <div class="business-label">备注信息：</div>
              <div class="business-value notes">
                {{ businessParams.notes }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 合同信息查看弹窗 -->
    <ContractInfo
      v-model:visible="showContractModal"
      :contract-data="contractInfoData"
      @close="handleContractModalClose"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import ContractInfo from './contractInfo.vue';

const router = useRouter();
const route = useRoute();

// 活动选项卡
const activeTab = ref('technical');

// 当前页码
const currentPage = ref(1);
const query = reactive({
  pageNum: 1,
  pageSize: 10,
  keyword: ''
})

// 合同信息弹窗可见性
const showContractModal = ref(false);

// 合同信息数据
const contractInfoData = reactive({
  contractNo: '',
  contractName: '',
  customerName: '',
  salesPerson: '',
  deliveryDate: '',
  acceptanceDate: '',
  deliveryAddress: '',
  signDate: '',
  contactPerson: '',
  contactPhone: '',
  remark: '',
  attachment: ''
});

// 方案数据（从路由参数获取或API调用）
const schemeData = reactive({
  requirementName: '',
  contractNo: '',
  contractName: '',
  requirementNo: '',
  requirementType: '',
  materialContent: '',
  materialQuantity: '',
  currentStatus: '',
  salesPerson: '',
  createTime: ''
});

// 技术参数列表
const technicalParamsList = ref([]);

// 业务参数
const businessParams = reactive({
  emergencyLevel: '',
  deliveryDate: '',
  customerRequirements: '',
  notes: ''
});

// 处理页面加载时获取数据
onMounted(() => {
  // 从路由参数中获取数据
  const query = route.query;
  if (query) {
    schemeData.requirementName = query.requirementName || '需求名称1111';
    schemeData.contractNo = query.contractNo || 'HTBH-001';
    schemeData.contractName = query.contractName || '通过审批的合同名称';
    schemeData.requirementNo = query.requirementNo || 'XQB-001';
    schemeData.requirementType = '工程类';
    schemeData.materialContent = '卷帘门';
    schemeData.materialQuantity = '10';
    schemeData.currentStatus = '待计划';
    schemeData.salesPerson = '李四(lisi)';
    schemeData.createTime = '2025-03-31 19:03:03';
  }
  
  // 初始化技术参数数据
  technicalParamsList.value = [
    {
      field1: '填写的物料规格',
      field2: '填写的物料规格',
      field3: '填写的物料规格',
      unitPrice: '填写的物料规格',
      quantity: '填写的物料规格',
      field6: '填写的物料规格',
      field7: '填写的物料规格'
    }
    // 可以根据需要添加更多模拟数据
  ];
  
  // 初始化业务参数数据
  businessParams.emergencyLevel = '一般';
  businessParams.deliveryDate = '2025-04-20';
  businessParams.customerRequirements = '客户要求的具体内容，包括产品的技术规格、质量标准、交付要求等详细信息。客户希望产品能够满足特定的使用场景，并且具有良好的性能和可靠性。';
  businessParams.notes = '无特殊备注信息。';
});

// 处理返回按钮点击
const handleBack = () => {
  router.push({
    path: '/scheme',
  });
};

// 处理查看合同按钮点击
const viewContract = () => {
  console.log('查看合同:', schemeData.contractNo);
  
  // 设置合同信息数据
  contractInfoData.contractNo = schemeData.contractNo || 'HTBH0001';
  contractInfoData.contractName = schemeData.contractName || '合同名称名称';
  contractInfoData.customerName = '公司名称需求里带过来的';
  contractInfoData.salesPerson = '李四(lisi)';
  contractInfoData.deliveryDate = '2025年4月30日';
  contractInfoData.acceptanceDate = '2025年5月30日';
  contractInfoData.deliveryAddress = '湖北省武汉市江汉区xxxxxxxxxxxx';
  contractInfoData.signDate = '2025年3月30日';
  contractInfoData.contactPerson = '张三';
  contractInfoData.contactPhone = '15100000000';
  contractInfoData.remark = '';
  contractInfoData.attachment = '';
  
  // 显示弹窗
  showContractModal.value = true;
};

// 处理合同弹窗关闭
const handleContractModalClose = () => {
  showContractModal.value = false;
};

// 处理分页大小变化
function handleSizeChange(val) {
  query.pageSize = val;
  query.pageNum = 1;
  // 在实际应用中，这里应该调用获取数据的方法
}

// 处理分页当前页变化
const handleCurrentChange = (val) => {
  query.pageNum = val;
  // 在实际应用中，这里应该调用获取数据的方法
};
</script>

<style scoped>
.scheme-detail-container {
  padding: 20px;
  background-color: #fff;
  min-height: 100vh;
}

/* 上方展示信息区域样式 */
.header-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e8e8e8;
}

.info-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 需求名称容器 */
.requirement-name-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.requirement-name-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.requirement-name-value {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

/* 额外信息区域 */
.additional-info {
  display: flex;
  align-items: center;
  gap: 50px;
}

.info-left .contract-no,
.info-left .material-content,
.info-left .sales-person {
  font-size: 14px;
  color: #606266;
  min-width: 180px;
}

.info-left .contract-name,
.info-left .material-quantity,
.info-left .create-time {
  font-size: 14px;
  color: #606266;
  min-width: 280px;
}

.info-left .requirement-no,
.info-left .current-status {
  font-size: 14px;
  color: #606266;
  min-width: 150px;
}

.info-left .requirement-type {
  font-size: 14px;
  color: #606266;
  min-width: 120px;
}

.info-right {
  display: flex;
  align-items: flex-start;
}

/* 下方左右布局区域样式 */
.main-content-container {
  display: flex;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  overflow: hidden;
  min-height: 600px;
}

/* 左侧选项卡样式 */
.left-sidebar {
  width: 200px;
  background-color: #f5f7fa;
  padding: 25px 20px 20px 20px;
  display: flex;
  flex-direction: column;
}

.config-title {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-top: 0;
}

.tab-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tab-item {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.tab-item.active {
  background-color: #2457d7;
  color: #fff;
}

.tab-item .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 10px;
}

.tab-item:not(.active) .dot {
  background-color: #409eff;
}

.tab-item.active .dot {
  background-color: #ccc;
}

.tab-text {
  font-size: 14px;
}

/* 中间分割线样式 */
.divider {
  width: 1px;
  background-color: #e8e8e8;
  height: 100%;
}

/* 右侧内容区域样式 */
.right-content {
  flex: 1;
  background-color: #fff;
  padding: 20px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 右侧头部样式 */
.right-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e8e8e8;
}

.content-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin: 0;
}

.content-area {
  flex: 1;
  overflow-y: auto;
}

/* 技术参数内容样式 */
.technical-content {
  width: 100%;
}

.total-quantity {
  margin-bottom: 15px;
  font-size: 14px;
  color: #606266;
}

/* 分页容器 */
.pagination-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 20px;
  gap: 20px;
}

.total-count {
  font-size: 14px;
  color: #606266;
}

/* 业务参数内容样式 */
.business-content {
  width: 100%;
}

.business-item {
  display: flex;
  margin-bottom: 20px;
  align-items: flex-start;
}

.business-label {
  width: 80px;
  font-weight: 500;
  color: #303133;
  text-align: left;
  margin-right: 10px;
  font-size: 14px;
}

.business-value {
  flex: 1;
  color: #606266;
  font-size: 14px;
}

.customer-requirements,
.notes {
  word-wrap: break-word;
  word-break: break-all;
  line-height: 1.5;
}
</style>